<div
  id="loading"
  style="
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #f0f0f0;
  "
>
  <style>
    .loader {
      --duration: 3s;
      width: 44px;
      height: 44px;
      position: relative;
      display: inline-block;
      margin: 0 16px;
    }
    .loader:before {
      content: ' ';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      position: absolute;
      display: block;
      background: #ff700a;
      top: 37px;
      left: 19px;
      -webkit-transform: translate(-18px, -18px);
      transform: translate(-18px, -18px);
      -webkit-animation: dotRect var(--duration)
        cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
        infinite;
    }
    .loader svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .loader svg rect,
    .loader svg polygon,
    .loader svg circle {
      fill: none;
      stroke-width: 10px;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .loader svg polygon {
      stroke-dasharray: 145 76 145 76;
      stroke-dashoffset: 0;
      -webkit-animation: pathTriangle var(--duration)
        cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: pathTriangle var(--duration)
        cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
    .loader svg rect {
      stroke-dasharray: 192 64 192 64;
      stroke-dashoffset: 0;
      -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
        infinite;
      animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
    .loader svg circle {
      stroke-dasharray: 150 50 150 50;
      stroke-dashoffset: 75;
      -webkit-animation: pathCircle var(--duration)
        cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: pathCircle var(--duration)
        cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
    .loader.triangle {
      width: 48px;
    }
    .loader.triangle:before {
      left: 21px;
      -webkit-transform: translate(-10px, -18px);
      transform: translate(-10px, -18px);
      -webkit-animation: dotTriangle var(--duration)
        cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: dotTriangle var(--duration)
        cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }
    @-webkit-keyframes pathTriangle {
      33% {
        stroke-dashoffset: 74;
      }
      66% {
        stroke-dashoffset: 147;
      }
      100% {
        stroke-dashoffset: 221;
      }
    }
    @keyframes pathTriangle {
      33% {
        stroke-dashoffset: 74;
      }
      66% {
        stroke-dashoffset: 147;
      }
      100% {
        stroke-dashoffset: 221;
      }
    }
    @-webkit-keyframes dotTriangle {
      33% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      66% {
        -webkit-transform: translate(10px, -18px);
        transform: translate(10px, -18px);
      }
      100% {
        -webkit-transform: translate(-10px, -18px);
        transform: translate(-10px, -18px);
      }
    }
    @keyframes dotTriangle {
      33% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      66% {
        -webkit-transform: translate(10px, -18px);
        transform: translate(10px, -18px);
      }
      100% {
        -webkit-transform: translate(-10px, -18px);
        transform: translate(-10px, -18px);
      }
    }
    @-webkit-keyframes pathRect {
      25% {
        stroke-dashoffset: 64;
      }
      50% {
        stroke-dashoffset: 128;
      }
      75% {
        stroke-dashoffset: 192;
      }
      100% {
        stroke-dashoffset: 256;
      }
    }
    @keyframes pathRect {
      25% {
        stroke-dashoffset: 64;
      }
      50% {
        stroke-dashoffset: 128;
      }
      75% {
        stroke-dashoffset: 192;
      }
      100% {
        stroke-dashoffset: 256;
      }
    }
    @-webkit-keyframes dotRect {
      25% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      50% {
        -webkit-transform: translate(18px, -18px);
        transform: translate(18px, -18px);
      }
      75% {
        -webkit-transform: translate(0, -36px);
        transform: translate(0, -36px);
      }
      100% {
        -webkit-transform: translate(-18px, -18px);
        transform: translate(-18px, -18px);
      }
    }
    @keyframes dotRect {
      25% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      50% {
        -webkit-transform: translate(18px, -18px);
        transform: translate(18px, -18px);
      }
      75% {
        -webkit-transform: translate(0, -36px);
        transform: translate(0, -36px);
      }
      100% {
        -webkit-transform: translate(-18px, -18px);
        transform: translate(-18px, -18px);
      }
    }
    @-webkit-keyframes pathCircle {
      25% {
        stroke-dashoffset: 125;
      }
      50% {
        stroke-dashoffset: 175;
      }
      75% {
        stroke-dashoffset: 225;
      }
      100% {
        stroke-dashoffset: 275;
      }
    }
    @keyframes pathCircle {
      25% {
        stroke-dashoffset: 125;
      }
      50% {
        stroke-dashoffset: 175;
      }
      75% {
        stroke-dashoffset: 225;
      }
      100% {
        stroke-dashoffset: 275;
      }
    }
    .loading-text {
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      letter-spacing: 0.1em;
      color: #666;
    }
  </style>
  <div
    style="
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -50px 0 0 -120px;
    "
  >
    <div class="loader">
      <svg viewBox="0 0 80 80">
        <defs>
          <linearGradient
            id="gradient"
            x1=".004%"
            x2="100.131%"
            y1="49.993%"
            y2="49.993%"
          >
            <stop offset="0%" stop-color="#6500FF"></stop>
            <stop offset="16%" stop-color="#6A09FF"></stop>
            <stop offset="43%" stop-color="#7623FF"></stop>
            <stop offset="77%" stop-color="#8A4CFF"></stop>
            <stop offset="99%" stop-color="#996BFF"></stop>
          </linearGradient>
        </defs>
        <circle
          id="test"
          cx="40"
          cy="40"
          r="32"
          stroke="url(#gradient)"
        ></circle>
      </svg>
    </div>
    <div class="loader triangle">
      <svg viewBox="0 0 86 80">
        <polygon points="43 8 79 72 7 72" stroke="url(#gradient)"></polygon>
      </svg>
    </div>
    <div class="loader">
      <svg viewBox="0 0 80 80">
        <rect x="8" y="8" width="64" height="64" stroke="url(#gradient)"></rect>
      </svg>
    </div>
    <div class="loading-text">
      <p>Loading...</p>
    </div>
  </div>
</div>
